<template>
  <view class="management">
    <view class="navcon">
      <u-navbar placeholder :autoBack="true" title="创建订单"> </u-navbar>
    </view>
    <!-- 收货地址 -->
    <view
      class="managementone"
      @click="skip('/pages/newaddress/newaddress')"
      v-if="list.length"
    >
      <image
        class="image1"
        src="http://s30abnixv.hn-bkt.clouddn.com/dizhiguanli.png"
      ></image>
      <view class="onemiddle">请选择收货地址</view>
      <u-icon name="arrow-right" class="icon"></u-icon>
    </view>

    <view class="newaddress_content">
      <view class="onecontent" @click="xuanze">
        <view class="onecontentleft">
          <view class="onecontenttop">
            <view class="left">{{ list.title || list.name }}</view>
            <view>{{ list.phone }}</view>
          </view>
          <view class="onecontentbottom">
            <view class="bottomleft">
              {{ list.text || list.city }}
            </view>
            <view class="bottomleft">
              {{ list.address }}
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 红蓝线 -->
    <view class="redborder">
      <image src="http://s30abnixv.hn-bkt.clouddn.com/dingdan_02.png"></image>
    </view>
    <!-- 商品列表开始 -->
    <view class="managementtwo">
      <image
        src="http://s30abnixv.hn-bkt.clouddn.com/index_img%20%2810%29.png"
      ></image>
      <view class="managementtwotext"> 商品列表 </view>
    </view>
    <!-- 商品详情开始 -->
    <view
      class="managementthree"
      v-for="(item, index) in managementthree"
      :key="index"
    >
      <view class="managementthreeleft">
        <image :src="item.image"></image>
      </view>
      <view class="managementthreeright">
        <view class="title">{{ item.text1 }}</view>
        <view class="textone">基础款 *{{ num }}</view>
        <view class="texttwo">￥{{ money }}</view>
      </view>
    </view>
    <!-- 优惠券列表 -->
    <view class="managementfour">
      <view
        class="managementfourone"
        @click="picker(index)"
        v-for="(item, index) in managementfourone"
        :key="index"
      >
        <view class="oneleft">
          <view class="oneleft1">{{ item.oneleft1 }} </view>
          <view class="oneleft2"> {{ item.oneleft2 }}</view>
        </view>
        <view class="oneright"> {{ item.oneright }} </view>
      </view>
    </view>
    <!-- 优惠券选择器 -->
    <u-picker
      :show="show1"
      @cancel="cancel1"
      @confirm="confirm1"
      :columns="columns1"
      :keyName="'vou'"
    ></u-picker>
    <!-- 配送选择器 -->
    <u-picker
      :show="show2"
      @cancel="cancel2"
      @confirm="confirm2"
      :columns="columns2"
      :keyName="'dis'"
    ></u-picker>
    <!-- 物流选择器 -->
    <u-picker
      :show="show3"
      @cancel="cancel3"
      @confirm="confirm3"
      :columns="columns3"
      :keyName="'name'"
    ></u-picker>
    <!-- 商品总价 -->
    <view class="total">
      <view class="totalone">
        <view class="totaloneleft"> 商品总价</view>
        <view class="totaloneright">￥{{ money }}</view>
      </view>
      <view class="totalone">
        <view class="totaloneleft"> 运费</view>
        <view class="totaloneright">￥{{ run }} </view>
      </view>
      <view class="totalone">
        <view class="totaloneleft"> 运费</view>
        <view class="totaloneright1">本次不开具发票 </view>
      </view>
      <view class="totaltwo">
        <view class="totaltwoleft"> 备注</view>
        <view class="totaltworight">
          <input type="text" placeholder="请填写备注信息" />
        </view>
      </view>
    </view>
    <!-- 提交订单 -->
    <view class="submitcon">
      <view class="submitconleft">
        <view class="submitconleftone">
          实付款
          <text>￥{{ money }}</text>
        </view>
      </view>
      <view class="submitconright" @click="submit"> 提交订单 </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onShow } from "@dcloudio/uni-app";
import { useStore } from "vuex";
const store = useStore();
const num = ref(1);
const money = ref(0);
const run = ref(0);
const show1 = ref(false); //优惠券选择器
const show2 = ref(false); //配送选择器
const show3 = ref(false); //物流选择器
const peishong = ref("物流配送");
const wuliu = ref("顺丰速运");
const list = ref([]);
onShow(() => {
  list.value = store.getters.addindexlist;
});
// 物流选择器
const columns3 = ref([
  [
    {
      name: "顺丰速运",
      key: 1,
    },
    {
      name: "申通快递",
      key: 2,
    },
    {
      name: "圆通快递",
      key: 3,
    },
    {
      name: "中通快递",
      key: 4,
    },
    {
      name: "邮政快递",
      key: 5,
    },
  ],
]);
// 配送选择器
const columns2 = ref([
  [
    {
      dis: "物流配送",
      key: 1,
    },
    {
      dis: "卖家自提",
      key: 2,
    },
  ],
]);
// 优惠券选择器
const columns1 = ref([
  [
    {
      vou: "暂时没有优惠券",
      key: 1,
    },
  ],
]);
const cancel1 = () => {
  show1.value = false;
};
const cancel2 = () => {
  show2.value = false;
};
const cancel3 = () => {
  show3.value = false;
};
// 物流选择器
const confirm3 = ({ indexs }) => {
  show3.value = false;
  managementfourone.value[2].oneright = columns3.value[0][indexs].name;
  wuliu.value = columns3.value[0][indexs].name;
};
// 配送选择器
const confirm2 = ({ indexs }) => {
  //显示选择的内容

  show2.value = false;
  managementfourone.value[1].oneright = columns2.value[0][indexs].dis;
  peishong.value = columns2.value[0][indexs].dis;
};
// 优惠券选择器
const confirm1 = ({ indexs }) => {
  show1.value = false;
  managementfourone.value[0].oneright = columns1.value[0][indexs].vou;
};
const picker = (index) => {
  if (index === 0) {
    show1.value = true;
  } else if (index === 1) {
    show2.value = true;
  } else {
    show3.value = true;
  }
};
const managementthree = ref([
  {
    image: "http://s30abnixv.hn-bkt.clouddn.com/index_banner2.png",
    text1: "真我 (realmelrealmek我Watch T1运动智能手表 蓝牙通话 蓝牙音乐健.",
  },
]);
const managementfourone = ref([
  {
    oneleft1: "券",
    oneleft2: "优惠群",
    oneright: "选择优惠券",
  },
  {
    oneleft1: "寄",
    oneleft2: "配送方式",
    oneright: "物流配送",
  },
  {
    oneleft1: "递",
    oneleft2: "快递公司",
    oneright: "顺丰速运",
  },
]);
//提交
const submit = () => {
  console.log("配送方式" + peishong.value);
};
//跳转
const skip = (url) => {
  uni.navigateTo({
    url: url,
  });
};
const xuanze = () => {
  uni.navigateTo({
    url: "/pages/newaddress/newaddress",
  });
};
</script>

<style lang="scss" scoped>
.management {
  background-color: #f8f8f8;
  .managementone {
    padding: 30rpx;
    display: flex;
    align-items: center;
    background-color: #fff;
    .image1 {
      width: 50rpx;
      height: 50rpx;
    }
    .onemiddle {
      color: #323433;
      margin-left: 20rpx;
      letter-spacing: 2rpx;
    }
    .icon {
      transform: translateY(2rpx);
    }
  }
  //   红蓝线
  .redborder {
    width: 100%;
    height: 8rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .managementtwo {
    border-bottom: 1px solid #f2f3f7;
    margin-top: 40rpx;
    padding: 20rpx 30rpx;
    display: flex;
    align-items: center;
    image {
      width: 50rpx;
      height: 50rpx;
    }
    .managementtwotext {
      color: #333;
      margin-left: 20rpx;
    }
  }
  .managementthree {
    padding: 10rpx;
    display: flex;
    align-items: center;
    .managementthreeleft {
      width: 35%;
      image {
        width: 100%;
        height: 190rpx;
      }
    }
    .managementthreeright {
      width: 65%;
      padding: 10rpx 20rpx;
      .title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #313133;
      }
      .textone {
        color: #929398;
        font-size: 28rpx;
        margin: 14rpx 0rpx;
      }
      .texttwo {
        color: #fc437d;
        font-size: 28rpx;
      }
    }
  }
  .managementfour {
    padding: 20rpx 30rpx;
    // margin: 20rpx 0rpx;
    background-color: #fff;
    .managementfourone {
      display: flex;
      padding: 20rpx 0rpx;
      justify-content: space-between;
      align-items: center;
      background-color: #fff;
      border-bottom: 1px solid #f2f3f7;
      .oneleft {
        display: flex;
        align-items: center;
        .oneleft1 {
          background-color: #fb4369;
          width: 38rpx;
          height: 38rpx;
          text-align: center;
          color: #fff;
          font-size: 26rpx;
        }
        .oneleft2 {
          color: #90939a;
          margin-left: 10rpx;
        }
      }
      .oneright {
        color: #fb4369;
      }
    }
  }
  .total {
    background-color: #fff;
    margin: 20rpx 0rpx;
    padding: 0rpx 30rpx;
    .totalone {
      border-bottom: 1px solid #f2f3f7;
      padding: 20rpx 0rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .totaloneleft {
        color: #909398;
      }
      .totaloneright {
        font-size: 28rpx;
        color: #fb4369;
      }
      .totaloneright1 {
        color: #333333;
        font-size: 28rpx;
      }
    }
    .totaltwo {
      border-bottom: 1px solid #f2f3f7;
      padding: 20rpx 0rpx;
      display: flex;
      align-items: center;
      .totaltwoleft {
        color: #909398;
      }
      .totaltworight {
        margin-left: 20rpx;
        color: #909398;
      }
    }
  }
  .submitcon {
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;
    align-items: center;
    .submitconleft {
      background-color: #fff;
      padding: 20rpx;
      width: 60%;
      .submitconleftone {
        padding-left: 20rpx;
        color: #67686c;
        font-size: 28rpx;
        text {
          color: #fb6c8b;
          font-size: 32rpx;
          display: inline-block;
          margin-left: 14rpx;
        }
      }
    }
    .submitconright {
      padding: 20rpx;
      font-size: 34rpx;
      color: #fff;
      background-color: #f9436b;
      text-align: center;
      width: 40%;
    }
  }
}

.newaddress_content {
  background-color: #f8f8f8;
  padding: 0 20rpx 20rpx 20rpx;
  .onecontent {
    margin-top: 20rpx;
    background-color: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .onecontentleft {
      width: 80%;
      .onecontenttop {
        color: #2f3034;
        font-size: 30rpx;
      }
      .onecontentbottom {
        display: flex;
        align-items: center;
        margin-top: 30rpx;

        .bottomleft {
          color: #90939a;
          margin-right: 20rpx;
        }
      }
    }
    .onecontentright {
      width: 20%;
      display: flex;
      justify-content: right;
      image {
        width: 44rpx;
        height: 44rpx;
      }
    }
  }
}
</style>
